<template>
    <div class="container">
        <el-page-header @back="goBack" content="基本设置"></el-page-header>
        <div class="e-m-t-45">
            <div class="form-head">商家组设置</div>
            <div class="form-item flex">
                <div class="e-flex-1">
                    <div class="title">经营范围</div>
                    <div class="label tips">设置经营范围地区（多选）</div>
                </div>
                <div>
                    <div class="e-m-b-10">
                        <el-tag class="e-m-r-15" type="info" v-for="(item,index) in citybusiness" :key="index">{{ item.name }}</el-tag>
                        <span class="link-blue" @click="setcity = !setcity"><i class="el-icon-edit"></i>设置范围</span>
                    </div>
                    <el-cascader v-model="cityData" separator="-" @change="SelectSearchCity" filterable :props="{
                        lazy: true,
                        checkStrictly: true,
                        multiple:false,
                        lazyLoad: loadCity,
                        label: 'name',
                        value: 'id',
                        multiple: true,
                        emitPath: false  // 关键！只存储最后一级的值
                    }" placeholder="选择地区" style="width: 100%;margin-right: 20px" clearable></el-cascader>
                </div>
            </div>
        </div>

        <div class="e-m-t-45">
            <div class="form-head">出库设置</div>
            <div class="form-item flex">
                <div class="e-flex-1">
                    <div class="title">出库差异阈值</div>
                    <div class="label tips">设置重量阈值（%）与件数阈值（件），超出任意一项，则红字提示</div>
                </div>
                <div class="flex" style="flex-direction: column;">
                    <el-input v-model="form.printnumber" type="number" placeholder="请输入数字" class="e-m-b-10">
                        <template slot="prepend">重量阈值：</template>
                        <el-button slot="append" @click="edit">确定</el-button>
                    </el-input>
                    <el-input v-model="form.printnumber" type="number" placeholder="请输入数字" class="">
                        <template slot="prepend">件数阈值：</template>
                        <el-button slot="append" @click="edit">确定</el-button>
                    </el-input>
                </div>
            </div>

            <!-- <div class="form-item flex">
                <div class="e-flex-1">
                    <div class="title">小票打印份数</div>
                    <div class="label tips">设置完成收货后需要打印的小票份数</div>
                </div>
                <div>
                    <el-input v-model="form.printnumber" type="number">
                        <el-button slot="append" @click="edit">确定</el-button>
                    </el-input>
                </div>
            </div>
            <div class="form-item flex">
                <div class="e-flex-1">
                    <div class="title">打印二维码</div>
                    <div class="label tips">打印的小票是否需要二维码</div>
                </div>
                <div>
                    <el-switch
                        v-model="form.printqrcode" @change="change($event,'printqrcode')">
                    </el-switch>
                </div>
            </div>
            <div class="form-item flex">
                <div class="e-flex-1">
                    <div class="title">前置摄像头</div>
                    <div class="label tips">录入收货单时前置摄像头是否开启拍照</div>
                </div>
                <div>
                    <el-switch
                        v-model="form.openfrontphoto" @change="change($event,'openfrontphoto')">
                    </el-switch>
                </div>
            </div> -->
        </div>

        <div class="e-m-t-45">
            <div class="form-head">盘点设置</div>
            <div class="form-item flex">
                <div class="e-flex-1">
                    <div class="title">盘点盈亏阈值</div>
                    <div class="label tips">超过预警值会有提示</div>
                </div>
                <div class="flex" style="flex-direction: column;">
                    <el-input v-model="form.printnumber" type="number" placeholder="请输入数字" class="e-m-b-10">
                        <template slot="prepend">黄色预警：</template>
                        <el-button slot="append" @click="edit">确定</el-button>
                    </el-input>
                    <el-input v-model="form.printnumber" type="number" placeholder="请输入数字">
                        <template slot="prepend">红色预警：</template>
                        <el-button slot="append" @click="edit">确定</el-button>
                    </el-input>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        layout: 'admin',
        head() {
            return {
                title: '基本设置-' + this.websetting.name
            }
        },
        data() {
            return {
				imageUrl: '',
				form: {
					id: 0,
					name: "", //网站名称
					copyright: "", //版权信息
					telphone: "", //联系热线
					address: "", //地址
					smsaccount: "", //短信账号
					smspassword: "", //短信密码
					wxqrcode: "", //微信公众号二维码
					sitelogoimg: "", //前台Logo
					adminlogoimg: "", //后台Logo
					receivingtimelimit: 30, //接单超时时限(客户组：分钟)
					brothertripintervaltime: 3, //小哥行程间隔时间(客户组：分钟)
					mapwebkey: "", //地图WebKey
					mapandroidkey: "", //地图安卓Key
					mapwxkey: "", //地图微信Key
					wx_appid: "", //绑定支付的APPID（必须配置）
					wx_mchid: "", //商户号（必须配置）
					wx_key: "", //商户支付密钥，参考开户邮件设置（必须配置）
					wx_url: "", //支付结果通知url
					wx_appsecret: "", //公众账号secert（仅JSAPI支付的时候需要配置）
					wx_sslcert_path: "", //证书路径,注意应该填写绝对路径（仅退款、撤销订单时需要）
					wx_sslcert_password: "", //证书密码（仅退款、撤销订单时需要）
					withdrawalsinglelimit: 0, //限制微信一次提现金额
  					withdrawaldailylimit: 0, //限制微信每人每天提现金额
          			withdrawalautoexamine:0,//提现自动审核金额
		  			wxbalanceremindvalue: 0, //微信余额不足提醒值（元）
					ismaintain: false, //网站是否维护
					maintainmsg: "", //网站维护信息,网站维护信息不能超过50个字
					userswapratio: 0, //用户兑换积分比例
					swapratio: 0, //客户组兑换积分比例
					differenceratio: 0, //差额百分比
				},
				citybusiness: [],
				setcity: false,
                cityData: [],
				cityids: [],
				isAddCity: false
            }
        },
        computed: {
            ...mapState({
                userdetail: state => state.userdetail,
            }),
        },
        watch:{
            cityData(val){
                // console.log(val)
            }
        },
        mounted() {
            this.getSiteSetting()
        },
        methods: {
            // 返回上一页
            goBack() {
                this.$router.go(-1)
            },
            // 获取设置
            async getSiteSetting(){
                const res = await this.$axios.get('/Admin/SiteSetting/Details')
                this.citybusiness = res.citybusiness
                
                // 转换数据结构
                this.cityData = res.citybusiness.map(item => {
                    return item.path
                    .split(',')
                    .filter(Boolean) // 去除空字符串
                    .map(Number)    // 转为数字类型
                })

                console.log('cityData',this.cityData)
            },
            // 设置
			change(value,type){
                console.log(value,type)
				this.form[type] = value
                this.edit()
			},
            // 确认修改
            edit(){
                this.$axios.post('/Admin/SiteSetting/Set', {
					name: this.form.name, //网站名称
					copyright: this.form.copyright, //版权信息
					telphone: this.form.telphone, //联系热线
					address: this.form.address, //地址
					smsaccount: this.form.smsaccount, //短信账号
					smspassword: this.form.smspassword, //短信密码
					wxqrcode: this.form.wxqrcode, //微信公众号二维码
					sitelogoimg: this.form.sitelogoimg, //前台Logo
					adminlogoimg: this.form.adminlogoimg, //后台Logo
					receivingtimelimit: this.form.receivingtimelimit, //接单超时时限(客户组：分钟)
					brothertripintervaltime: this.form.brothertripintervaltime, //小哥行程间隔时间(客户组：分钟)
					mapwebkey: this.form.mapwebkey, //地图WebKey
					mapandroidkey: this.form.mapandroidkey, //地图安卓Key
					mapwxkey: this.form.mapwxkey, //地图微信Key
					cityids: this.cityids, //经营范围
					withdrawalsinglelimit: this.form.withdrawalsinglelimit, //限制微信一次提现金额
  					withdrawaldailylimit: this.form.withdrawaldailylimit, //限制微信每人每天提现金额
          			withdrawalautoexamine:this.form.withdrawalautoexamine,//提现自动审核金额
					ismaintain: this.form.ismaintain, //网站是否维护
					maintainmsg: this.form.maintainmsg, //网站维护信息,网站维护信息不能超过50个字
					wxbalanceremindvalue: this.form.wxbalanceremindvalue, //微信余额不足提醒值（元）
					userswapratio: this.form.userswapratio, //用户兑换积分比例
					swapratio: this.form.swapratio, //客户组兑换积分比例
					differenceratio: this.form.differenceratio //差额百分比
				}).then((res) => {
					// this.$message.success(res.msg);
					this.$message.success("修改成功");

					this.getsetting()
					this.setcity = false
				})
            },
            SelectSearchCity(cityidArr) { //搜索选择城市
				this.cityids = cityidArr.flat() // 拍平多维数组
				// console.log('cityids',this.cityids)
			},
			loadCity(node, resolve) { //加载城市
				this.$axios.post('/city/List', {
					pageIndex: 1,
					pageSize: 9999,
					pId: node.level == 0 ? '0' : node.value
				}).then((res) => {
					node = res.rows.map(function (c) {
						return {
							id: c.id,
							name: c.name,
							leaf: node.level >= 3
						}
					});
					resolve(node);
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
    .form-head{
        background-color: var(--light);
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 3px;
        color: var(--dark);
    }
    .form-item{
        border-bottom: 1px solid var(--border-light);
        padding: 20px;
        margin-bottom: 15px;
        align-items: center;
        &:hover{
            background-color: #0069ff08;
        }
        &.pointer{
            cursor: pointer;
        }
        .title{
            font-size: 18px;
            // font-weight: 100;
            margin-bottom: 10px;
            line-height: 1em;
        }
        .tips{
            font-size: 14px;
        }
    }
    .link-blue{
		color: var(--blue);
		text-decoration: underline;
		font-size: 12px;
		cursor: pointer;
	}
</style>